<template>
  <div class="container">
    <div class="ui-title">基础用法</div>
    <tab :tabs="tabs" @change="changeTab"></tab>

    <div class="ui-title">自定义指示器</div>
    <tab
      :tabs="tabs"
      lineBottom="0"
      :lineStyle="lineStyle"
      @change="changeTab"
    ></tab>
  </div>
</template>

<script>
import Tab from "../../components/tab";
export default {
  components: {
    Tab,
  },
  data() {
    return {
      tabs: [
        {
          name: "标签1",
        },
        {
          name: "标签2",
        },
        {
          name: "标签3",
        },
        {
          name: "标签4",
        },
        {
          name: "标签5",
        },
      ],
      lineStyle: {
        width: "30px",
        background: "#FA9324",
      },
    };
  },
  methods: {
    changeTab() {},
  },
};
</script>


<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: #f7f8fa;
  overflow: hidden;
}
</style>